<template>
  <div class="articleDetail-container">
    <el-row style="margin-bottom: 15px;">
      <el-col :span="24">
        <el-card shadow="never">
          <el-row>
            <el-col :span="5" style="text-align: center">
              <div>
                <!--                <el-image :src="userInfo.avatar"></el-image>-->

                <el-avatar fit="scale-down" :size="100" :src="userInfo.avatar"></el-avatar>
              </div>
            </el-col>
            <el-col :span="19" style="position: relative;">


              <el-descriptions :column="1" :colon="false">
                <el-descriptions-item>
                  <span
                      style="font-weight: bolder;word-spacing: 1px;">
                {{ userInfo.nickName }}
              </span>
                </el-descriptions-item>
                <el-descriptions-item>{{ userInfo.email }}</el-descriptions-item>
                <el-descriptions-item>
                  <i style="margin-right: 5px;" class="el-icon-tickets"></i>
                  <span style="opacity: 0.5">世界那么大，总得写点儿什么记录一下。</span>
                </el-descriptions-item>

              </el-descriptions>

              <el-button
                  type="primary"
                  size="small"
                  class="user-edit"
                  @click="editHandle"
              >编辑</el-button>

            </el-col>

          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-card shadow="never">
          <div slot="header" class="user-title">
            个人中心
          </div>

          <el-menu
              class="el-menu-demo"
              mode="horizontal"
              background-color="#ffffff"
              text-color="#dbdbdb"
              active-text-color="#ffd04b">
            <el-menu-item style="width: 100%;color:gray;text-align: center;font-weight: bolder;" index="1">我的资料</el-menu-item>

          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="never">
          <div slot="header" class="user-title">我的资料</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {reqUserInfo} from "@/API";

export default {
  name: 'userCom',
  data() {
    return {
      userInfo: {
        avatar: "",
        email: "",
        nickName: "",
        sex: ""
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    editHandle(){
      this.$message.info('功能暂未开放！')
    },
    init() {
      if (localStorage.getItem("pole_item_info") !== null) {
        this.userInfo = JSON.parse(localStorage.getItem("pole_item_info"))

      } else {
        reqUserInfo().then((res) => {
          if (res.status === 200) {
            this.userInfo = res.data
            localStorage.setItem("pole_item_info", JSON.stringify(res.data))
          } else {
            this.$message.warning("网络不稳定，请稍后重试！")
          }
        })
      }
    }
  }

}
</script>

<style>

.articleDetail-container {
  margin: 10px auto;
  width: 60%;
}
.user-title{
  color: gray;
  font-size: 16px;
}

.user-edit {
  position: absolute;
  top: 0;
  right: 0;
  border-color: #1bb6e2;
  font-weight: bolder;
  color: #1bb6e2;
  background-color: white;
}
</style>
